<!--
* @author wn
* @date 2023/03/01 15:03:13
* @description: 登录页
!-->
<template>
	<div
		class="container"
		:style="{ backgroundColor: lightBackground ? '#fff' : '#293146' }"
	>
		<div class="user-layout-login">
			<div
				class="container-left"
				:style="{
					background: lightBackground
						? 'url(' + lightBg + ')'
						: 'url(' + darkBg + ')',
				}"
			>
				<div style="margin-right: 100px">
					<div class="svg-box"></div>
					<div class="sys-title">深圳市商用软件有限公司WMS/MES/APS系统</div>
				</div>
			</div>

			<div class="container-right">
				<div class="login-form">
					<div
						style="
							font-weight: bold;
							font-size: 2em;
							margin-bottom: 10px;
							color: #000c17;
						"
						:style="{ color: lightBackground ? '#000c17' : '#B3B6BE' }"
					>
						{{ $t('basic.login') }}
					</div>

					<a-form-model class="user-login-form">
						<login-account
							ref="target"
							:theme="lightBackground"
							@validateFail="validateFail"
							@requestSuccess="requestSuccess"
							@fail="requestFailed"
						></login-account>

						<a-form-model-item>
							<a-checkbox
								@change="handleRememberMeChange"
								:checked="rememberMe"
								:style="{ color: lightBackground ? '#000c17' : '#B3B6BE' }"
							>
								{{ $t('basic.autoLogin') }}
							</a-checkbox>
						</a-form-model-item>

						<a-form-item style="margin-top: 24px">
							<a-button
								size="large"
								type="primary"
								htmlType="submit"
								class="login-button"
								:loading="loginBtn"
								@click.stop.prevent="submitHandle"
								:disabled="loginBtn"
							>
								{{ $t('basic.login') }}
							</a-button>
						</a-form-item>
					</a-form-model>
				</div>
			</div>
		</div>

		<!-- 主题切换按钮 -->
		<!-- <darkModeToggle class="mode-toggle" @change="changeTheme" /> -->
		<!--  logo  -->
		<div class="info-icons">
			<img src="@/assets/logo_186_king-white.png" style="width: 40%" alt="" />
		</div>

		<!-- 语言选择组件 -->
		<locale-select class="mode-toggle" />
		<!-- <two-step-captcha
			v-if="requiredTwoStepCaptcha"
			:visible="stepCaptchaVisible"
			@success="stepCaptchaSuccess"
			@cancel="stepCaptchaCancel"
		></two-step-captcha>
		<login-select-tenant
			ref="loginSelect"
			@success="loginSelectOk"
		></login-select-tenant>
		<third-login ref="thirdLogin"></third-login> -->
	</div>
</template>
<script setup>
import { ref } from 'vue'
import lightBg from '@/assets/login-bg.svg'
import darkBg from '@/assets/login-bg-dark.svg'
import LoginAccount from './LoginAccount'
import { useRouter } from 'vue-router'
import LocaleSelect from '@/components/tools/LocaleSelect'

// 控制主题更改
const lightBackground = ref(true)

// LoginAccount 实例
const target = ref('')

// 自动登陆
const rememberMe = ref(true)
const handleRememberMeChange = e => {
	rememberMe.value = e.target.checked
}

// 登录
const submitHandle = () => {
	target.value.handleLogin(rememberMe.value)
}

const router = useRouter()
// 登陆成功触发
const requestSuccess = () => {
	router.push('/dashboard/analysis')
	// 跳转主页 /dashboard/analysis
}
</script>
<style scoped lang="less">
.container {
	position: relative;
	.mode-toggle {
		position: absolute;
		right: 16px;
		top: 12px;
	}
	.info-icons {
		position: absolute;
		left: 13%;
		top: 5%;

		display: flex;
		align-items: center;
		// img {
		// }
		span {
			color: #fff;
			font-size: 30px;
			margin-left: 20px;
		}
	}
}
.user-layout-login {
	height: 100vh;
	overflow: hidden;
	width: 100%;
	display: flex;
	.container-left {
		flex: 1.09;
		/*background: url("../../assets/login-bg.svg");*/
		background-position: 100% !important;
		background-repeat: no-repeat !important;
		background-size: auto 100% !important;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.svg-box {
			width: 390px;
			height: 200px;
			background: url('@/assets/login-box-bg.svg');
			background-position: 100%;
			background-repeat: no-repeat;
			background-size: auto 100%;
		}
		.sys-title {
			font-size: 30px;
			color: #ffffff;
			margin-top: 30px;
		}
	}
	.container-right {
		flex: 1;

		display: flex;
		flex-direction: column;
		justify-content: center;

		.login-form {
			margin-left: 40px;
			min-width: 260px;
			width: 400px;

			animation: slowDisplay 1s ease;
			animation-fill-mode: forwards;
		}

		@keyframes slowDisplay {
			0% {
				margin-left: 70px;
				opacity: 0;
			}
			100% {
				margin-left: 40px;
				opacity: 1;
			}
		}

		.user-login-form {
			label {
				font-size: 14px;
			}
			.getCaptcha {
				display: block;
				width: 100%;
				height: 40px;
			}

			.forge-password {
				font-size: 14px;
			}

			button.login-button {
				padding: 0 15px;
				font-size: 16px;
				height: 40px;
				width: 100%;
				border: none;
				background-color: #0a61bd;
			}
		}
	}
}
</style>
